<template>
    <template v-if="customerSex === '男'">
      <el-avatar v-if="age <= 17" :src="maleChild"></el-avatar>
      <el-avatar v-if="age >= 18 && age < 60" :src="male"></el-avatar>
      <el-avatar v-if="age >= 60" :src="maleOld"></el-avatar>
    </template>
    <template v-if="customerSex === '女'">
      <el-avatar v-if="age <= 17" :src="femaleChild"></el-avatar>
      <el-avatar v-if="age >= 18 && age < 60" :src="female"></el-avatar>
      <el-avatar v-if="age >= 60" :src="femaleOld"></el-avatar>
    </template>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core';

// 引入图片资源
import maleChild from "../../assets/image/male-child.png"
import male from "../../assets/image/male-adult.png"
import maleOld from "../../assets/image/male-old.png"
import femaleChild from "../../assets/image/female-child.png"
import female from "../../assets/image/female-adult.png"
import femaleOld from "../../assets/image/female-old.png"

export default defineComponent({
  name: "AvararImg",
  props: {
    customerSex: String,
    age: {
      type: Number,
      default: 18
    }
  },
  setup() {
    return {
      maleChild,
      male,
      maleOld,
      femaleChild,
      female,
      femaleOld,
    }
  }
})
</script>